<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>设置</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		.aui-btn-block {
			height: 2.2rem;
			line-height: 2.2rem;
			color: #FFFFFF;
			/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
			/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
			/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
		}

		.aui-btn {
			border-radius: 0.25rem;
		}

		.set-up-list {
			height: 2.75rem;
			line-height: 2.75rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.set-list-l {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
		}

		.shadow {
			position: fixed;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.4);
			top: 0;
		}

		.layout-footer {
			position: fixed;
			bottom: .75rem;
			left: 0;
			right: 0;
			color: #999;
		}

		.layout-footer span {
			padding: 0 .75rem;
			color: #2196F3;
			font-weight: 500;
			font-size: .7rem;
			opacity: .8;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="set-up ming-bg-white aui-margin-b-10" style="padding:0 .75rem;">
			<div class="set-up-list aui-border-b" tapmode @click="clear_cash">
				<div class="set-list-l">
					清除缓存
				</div>
				<div class="aui-text-right aui-margin-r-5" style="flex: 1;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">
					{{cash_size}}M
				</div>
				<div class="set-up-list-right" style="width: 0.35rem;">
					<img src="../../image/btn/btn-right-s.png" / style="width: 0.35rem;">
				</div>
			</div>

			<div v-if="login_status" class="set-up-list aui-border-b" tapmode onclick="setpush_status()">
				<div class="set-list-l">
					消息推送
				</div>
				<div class="set-up-list-right">
					<img v-if="!push_status" src="../../image/icon/icon-switch-off.png" / style="width: 2.25rem;height:1.5rem;">
					<img v-if="push_status" src="../../image/icon/icon-switch-on.png" / style="width: 2.25rem;height:1.5rem;">
				</div>
			</div>

			<div v-if="login_status" class="set-up-list aui-border-b" tapmode onclick="open_win('feedback.html.','feedback.html',false)">
				<div class="set-list-l">
					意见反馈
				</div>
				<div class="set-up-list-right">
					<img src="../../image/btn/btn-right-s.png" / style="width: 0.35rem;">
				</div>
			</div>

			<div class="set-up-list aui-border-b" tapmode onclick="openSharebox()">
				<div class="set-list-l">
					分享APP
				</div>
				<div class="set-up-list-right">
					<img src="../../image/btn/btn-right-s.png" / style="width: 0.35rem;">
				</div>
			</div>

			<div class="set-up-list aui-border-b" tapmode onclick="open_win_page('关于我们')">
				<div class="set-list-l">
					关于我们
				</div>
				<div class="set-up-list-right">
					<img src="../../image/btn/btn-right-s.png" / style="width: 0.35rem;">
				</div>
			</div>

			<div class="set-up-list">
				<div class="set-list-l">
					当前版本
				</div>
				<div class="set-up-list-right" style="font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">
					V{{version}}
				</div>
			</div>

		</div>

		<div class="set-up ming-bg-white aui-margin-b-10" style="padding:0 .75rem;">
			<div v-if="login_status" tapmode onclick="loginCancel()" class="set-up-list">
				<div class="" style="color:#005A93 !important;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;">
					注销账号
				</div>
			</div>
		</div>

		<div class="set-up ming-bg-white aui-margin-b-10" style="padding:0 .75rem;">
			<div v-if="login_status" tapmode onclick="loginOut()" class="set-up-list">
				<div class="" style="color:#005A93 !important;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;">
					退出登录
				</div>
			</div>
		</div>
		<div class="layout-footer flex-xy-center">
			<span onclick="open_win_page('服务协议')">服务协议</span> | <span onclick="open_win_page('隐私政策')">隐私政策</span>
		</div>

		<div v-show="share_show" class="aui-mask aui-mask-in">
			<div class="aui-text-center" style="width: 220px;height: 155px;margin-left: calc(50vw - 110px);margin-top: calc(30vh - 78px);position: relative;">
				<img style="width: 11rem;height: 7.75rem;" src="../../image/bg/bg-share-gold.png" />
				<div class="" style="background:#fff;position: absolute;width: 100%;">
					<span style="font-size: 1.5rem;padding-bottom: .85rem;">+{{share_gold}}</span>
					<p class="aui-font-size-13" style="padding-bottom: .85rem;">恭喜您获得金币奖励</p>
				</div>
				<div align="center" @click="share_show_hide()">
					<img style="max-height: 100%;max-width: 800%;margin-top:60px;" src="../../image/bg/bg-share-gold-bottom.png" />
				</div>
			</div>
		</div>

		<div class="shadow" v-if="shadow"></div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript" src="../../script/aui-sharebox.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			cash_size: '0.00',
			version: 0,
			push_status: true,
			login_status: false,
			share_show: false,
			share_gold: 0,
			shadow: false
		},
		methods: {
			clear_cash: function() {
				var dialogBox = api.require('dialogBox');
				dialogBox.alert({
					texts: {
						title: '提示',
						content: '清除后无法恢复，是否确认清除所有缓存？',
						leftBtnTitle: '取消',
						rightBtnTitle: '确定'
					},
					styles: {
						bg: '#fff',
						w: 295,
						corner: 10,
						title: {
							marginT: 20,
							titleSize: 17,
							titleColor: '#444444'
						},
						content: {
							marginT: 18,
							marginB: 30,
							color: '#444444',
							size: 17
						},
						left: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							// bg: 'widget://image/ico/ico_btn_left_bg.png',
							bg: "#fff",
							color: '#999999',
							size: 16
						},
						right: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							bg: '#fff',
							color: '#005A93',
							size: 16
						},
						horizontalLine: {
							color: '#EEEEEE',
							height: 1
						},
						verticalLine: {
							color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
							width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
						}
					}
				}, function(ret) {
					if (ret.eventType == 'left') {
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					} else if (ret.eventType == 'right') {
						api.clearCache(function() {
							vm.cash_size = '0.00';
							toast('清除完成');
							vm.shadow = false;
						});
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					}
				});
				// vm.shadow = true;
				// dialog.alert({
				// 	title: "提示",
				// 	msg: '清除后将无法恢复，是否确认清除所有缓存？',
				// 	buttons: ['取消', '确定']
				// }, function(ret) {
				// 	if(ret) {
				// 		if(ret.buttonIndex == '1') {
				// 			vm.shadow = false;
				// 		}
				// 		if(ret.buttonIndex == '2') {
				// 			api.clearCache(function() {
				// 				vm.cash_size = '0.00';
				// 				toast('清除完成');
				// 				vm.shadow = false;
				// 			});
				// 		}
				// 	}
				// })
			},
			get_cash: function() {
				api.getCacheSize(function(ret) {
					vm.cash_size = (ret.size / 1024 / 1024).toFixed(2);
				});
			}
		}
	})
	var dialog = new auiDialog();
	apiready = function() {
		if ($api.getStorage('token')) {
			vm.login_status = true;
			vm.push_status = $api.getStorage('userinfo').push_status == '1' ? true : false;
		}
		vm.get_cash()
		vm.version = vm.version != 0 ? vm.version : api.appVersion
	};

	function loginCancel() {
		var dialogBox = api.require('dialogBox');
		dialogBox.alert({
			texts: {
				title: '提示',
				content: '确定要注销账号吗？',
				leftBtnTitle: '取消',
				rightBtnTitle: '确认'
			},
			styles: {
				bg: '#fff',
				w: 295,
				corner: 10,
				title: {
					marginT: 20,
					titleSize: 17,
					titleColor: '#444444'
				},
				content: {
					marginT: 18,
					marginB: 30,
					color: '#444444',
					size: 17
				},
				left: {
					marginB: 0,
					marginL: 0,
					w: 147.5,
					h: 55,
					corner: 10,
					// bg: 'widget://image/ico/ico_btn_left_bg.png',
					bg: "#fff",
					color: '#999999',
					size: 16
				},
				right: {
					marginB: 0,
					marginL: 0,
					w: 147.5,
					h: 55,
					corner: 10,
					bg: '#fff',
					color: '#005A93',
					size: 16
				},
				horizontalLine: {
					color: '#EEEEEE',
					height: 1
				},
				verticalLine: {
					color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
					width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
				}
			}
		}, function(ret) {
			if (ret.eventType == 'left') {
				var dialogBox = api.require('dialogBox');
				dialogBox.close({
					dialogName: 'alert'
				});
			} else if (ret.eventType == 'right') {
				get_data('api/user/setUserInfo', {
					token: $api.getStorage('token'),
				}, function(ret) {
					// alert(JSON.stringify(ret.status))
					if (ret.status) {
						$api.rmStorage('token')
						$api.rmStorage('userinfo')
						send_event('loginout')
						openWin_login();
						vm.shadow = false;
						setTimeout(function() {
							close_win()
						}, 1000)
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					}
				})


			}
		});
	}

	function loginOut() {
		var dialogBox = api.require('dialogBox');
		dialogBox.alert({
			texts: {
				title: '提示',
				content: '确定要退出当前账号吗？',
				leftBtnTitle: '取消',
				rightBtnTitle: '确认'
			},
			styles: {
				bg: '#fff',
				w: 295,
				corner: 10,
				title: {
					marginT: 20,
					titleSize: 17,
					titleColor: '#444444'
				},
				content: {
					marginT: 18,
					marginB: 30,
					color: '#444444',
					size: 17
				},
				left: {
					marginB: 0,
					marginL: 0,
					w: 147.5,
					h: 55,
					corner: 10,
					// bg: 'widget://image/ico/ico_btn_left_bg.png',
					bg: "#fff",
					color: '#999999',
					size: 16
				},
				right: {
					marginB: 0,
					marginL: 0,
					w: 147.5,
					h: 55,
					corner: 10,
					bg: '#fff',
					color: '#005A93',
					size: 16
				},
				horizontalLine: {
					color: '#EEEEEE',
					height: 1
				},
				verticalLine: {
					color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
					width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
				}
			}
		}, function(ret) {
			if (ret.eventType == 'left') {
				var dialogBox = api.require('dialogBox');
				dialogBox.close({
					dialogName: 'alert'
				});
			} else if (ret.eventType == 'right') {
				$api.rmStorage('token')
				$api.rmStorage('userinfo')
				send_event('loginout')
				openWin_login();
				vm.shadow = false;
				setTimeout(function() {
					close_win()
				}, 1000)

				var dialogBox = api.require('dialogBox');
				dialogBox.close({
					dialogName: 'alert'
				});
			}
		});
		//vm.shadow = true;
		// dialog.alert({
		// 	title: "提示",
		// 	msg: '确定要退出当前账号吗？',
		// 	buttons: ['取消', '确定']
		// }, function(ret) {
		// 	if (ret) {
		// 		if (ret.buttonIndex == '1') {
		// 			vm.shadow = false;
		// 		}
		// 		if (ret.buttonIndex == '2') {
		// 			$api.rmStorage('token')
		// 			$api.rmStorage('userinfo')
		// 			send_event('loginout')
		// 			openWin_login();
		// 			vm.shadow = false;
		// 			setTimeout(function() {
		// 				close_win()
		// 			}, 1000)
		// 		}
		// 	}
		// })
	}

	function setpush_status() {
		get_data('api/user/updateUserInfo', {
			token: $api.getStorage('token'),
			push_status: vm.push_status ? 0 : 1
		}, function(ret) {
			// alert(JSON.stringify(ret.status))
			if (ret.status) {
				vm.push_status = vm.push_status ? false : true
				send_event('logined')
			}
		})
	}

	function openSharebox() {
		/*
		{
			image: '../../image/btn/face-to-face.png',
			text: '面对面扫描',
			value: 'face-to-face'
		}
		*/
		if (!$api.getStorage('token')) {
			openWin_login()
			return;
		}
		var sharebox = new auiSharebox();
		sharebox.init({
			frameBounces: true, //当前页面是否弹动，（主要针对安卓端）
			buttons: [{
				image: '../../image/btn/Space.png',
				text: '朋友圈',
				value: 'wx'
			}, {
				image: '../../image/btn/friends.png',
				text: '微信好友',
				value: 'wx-circle' //可选
			},{
				image: '../../image/btn/qq-space.png',
				text: 'QQ空间',
				value: 'qq-space'
			}, {
				image: '../../image/btn/qq-friends.png',
				text: 'QQ好友',
				value: 'qq-friends'
			}],
			// ,
			// {
			// 	image: '../../image/btn/face-to-face.png',
			// 	text: '面对面扫描',
			// 	value: 'face-to-face'
			// }],
			col: 3,
			shareTitle: '分享到', //可选,当然也可以采用下面的方式使用图标
			cancelTitle: '取消'
		}, function(ret) {
			if (ret) {
				console.log(ret.buttonIndex + '/' + ret.buttonValue)
				if (ret.buttonIndex == 1) {
					shareTowx('timeline')
				}
				if (ret.buttonIndex == 2) {
					shareTowx('session')
				}
				if (ret.buttonIndex == 3) {
					shareTowb()
				}
				if (ret.buttonIndex == 4) {
					shareQQ('QZone')
				}
				if (ret.buttonIndex == 5) {
					shareQQ('QFriend')
				}
			}
		})
	}

	function shareTowx(type) {
		var contentUrl = 'https://zm.zonmay.com/wap/share/download.html'
		var title = '分享一款超有趣的APP'
		var wx = api.require('wxPlus');
		wx.isInstalled(function(ret, err) {
			if (ret.installed) {} else {
				toast('当前设备未安装微信客户端');
				return;
			}
		});
		wx.shareWebpage({
			scene: type,
			title: title,
			description: title,
			contentUrl: contentUrl,
			thumb: 'http://zm.zonmay.com/public/logo.png'
		}, function(ret, err) {
			if (ret.status) {
				toast('分享成功');
				get_data('api/user/shareTakeGold', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.share_gold = ret.data.gold
						vm.share_show = true
						setTimeout(function() {
							vm.share_show = false
						}, 300000)
					}
				})
			} else {
				if (err.code == '2') {
					toast('取消分享');
				}
				console.log(err.code);
			}
		});
	}

	function shareTowb() {
		var contentUrl = 'https://zm.zonmay.com/wap/share/download.html'
		var title = '分享一款超有趣的APP'
		var weibo = api.require('weiboPlus');
		weibo.shareWebPage({
			text: title + '。详情点击链接查看',
			title: title,
			description: title,
			thumb: 'http://zm.zonmay.com/public/logo.png',
			contentUrl: contentUrl
		}, function(ret, err) {
			console.log(JSON.stringify(ret))
			if (ret.status) {
				toast('分享成功');
				get_data('api/user/shareTakeGold', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.share_gold = ret.data.gold
						vm.share_show = true
						setTimeout(function() {
							vm.share_show = false
						}, 300000)
					}
				})
			} else {
				if (err.code == '1') {
					toast('取消分享');
				}
				console.log(JSON.stringify(err))
			}
		});
	}

	function share_show_hide() {
		vm.share_show = false;
	}

	function shareQQ(type) {
		//alert(type)
		var qq = api.require('QQPlus');
		qq.installed(function(ret, err) {
			if (ret.status) {} else {
				api.alert({
					msg: "没有安装QQ"
				});
			}
		});
		var contentUrl = 'https://zm.zonmay.com/wap/share/download.html'
		var title = '分享一款超有趣的APP'
		qq.shareNews({
			url: contentUrl,
			title: title,
			description: title,
			imgUrl: 'http://zm.zonmay.com/public/logo.png',
			type: type
		}, function(ret, err) {
			//alert(JSON.stringify(err))
			if (ret.status) {
				alert("分享成功！");
				get_data('api/user/shareTakeGold', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.share_gold = ret.data.gold
						vm.share_show = true
						setTimeout(function() {
							vm.share_show = false
						}, 300000)
					}
				})
			} else {
				api.alert({
					msg: '取消分享'
				});
			}
		});
	}
</script>

</html>
